<template>
  <div>
    <!-- nav -->
    <navslot>
      <div slot="left" @click="fn">返回</div>
      <div slot="center">用户登录</div>
    </navslot>
    <!-- login -->
    <div class="form">
      <div class="uname">
        <input type="text" placeholder="用户名/邮箱/已验证手机">
      </div>
      <div class="password">
        <input type="password" placeholder="请输入密码">
      </div>
      <div class="login">
        <router-link @click.native="login" to="">登录</router-link>
        <router-link to="">一键登录</router-link>
        <!-- <span @click="login">登录</span> -->
      </div>
    </div>
    <!-- 模拟登录 -->
    <form action="https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey" method="post">
      <input type="text" placeholder="用户名/邮箱/已验证手机" name="mobile">
      <input type="password" placeholder="请输入密码" name="pwd">
      <input type="submit" value="登录">
    </form>
  </div>
</template>

<script>
  import axios from 'axios'
  import request from '@/request/request.js'
  import navslot from '@/components/nav/navslot'
  export default {
    components:{
      navslot
    },
    methods: {
      fn(){
        window.history.go(-1)
      },
      login(){
        let config={
          method:"post",
          url:"https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey",
          params:{
            mobile:13500000000,
            pwd:123456
          }
        }
        console.dir(axios)
        axios.interceptors.request.use(()=>{
          console.log("已拦截")
          return config;
        },(err)=>{
          console.log(err)
        })
        axios.interceptors.response.use(()=>{
          console.log("已拦截")
          return response;
        },()=>{

        })
        request(config).then(res=>console.log(res))

      }
    },
  }
</script>

<style scoped>
  .form{
    width: 100%;
  }
  .form input{
    display: block;
    width: 80%;
    height: 30px;
    line-height: 30px;
    border: none;
    outline: none;
    margin: 10px auto;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .login a:nth-of-type(1){
    display: block;
    width: 80%;
    height: 40px;
    line-height: 30px;
    margin: 10px auto;
    background: pink;
    text-align: center;
    border-radius: 20px;
    line-height: 40px;
    text-decoration:none ;
    color: white;
  }
  .login a:nth-of-type(2){
      display: block;
      width: 80%;
      height: 40px;
      line-height: 30px;
      margin: 10px auto;
      background: white;
      text-align: center;
      border: 1px solid red;
      border-radius: 20px;
      line-height: 40px;
      text-decoration:none ;
      color: red;
    }
</style>
